<template>
  <view>
    <view class="w100  pl-30 pr-30">
      <!-- 搜索部分 -->
      <view class="w100 bgff pr-24">
       <view class="rowsb rowsm mb-20 mt-20">
        <view class="title" style="width:20%;">实践课程：</view>
        <scroll-view scroll-x="true" style="white-space: nowrap;width: 80%;">
          <view class="rows rowsm h100">
            <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item,index) in practiceType"
              :key="index"
              :style="active == practiceType[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
              @click="handelTab(index)">{{item.name}}</view>
          </view>
        </scroll-view>
       </view>
       <view class="rows rowsm mb-20">
        <view class="title">报告状态：</view>
        <scroll-view scroll-x="true" style="white-space: nowrap;">
          <view class="rows rowsm h100">
            <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item,index) in practiceStatus"
              :key="index"
              :style="active3 == practiceStatus[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
              @click="handelCompletion(index)">{{item.name}}</view>
          </view>
        </scroll-view>
       </view>

      </view>
      <view class="points w100 bgff pr-24 mt-20 mb-20">获得积分数：100</view>
      <!-- 内容区域列表 -->
       <view class="content-warp">
        <view class="item-warp" v-for="item in itemList" :key="item.id" @click="goPage(item)">
          <view class="txt-warp">
            <text class="title">{{ item.title }}</text>
            <view class="btn">{{item.status}}</view>
          </view>
          <view class="rows rowsm rowsb mb-10">
            <view class="title">实践课程：{{ item.type }}</view>
            <view>{{item.time}}</view>
          </view>
         
        </view>

       </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value:'',
        active:0,
        active2:0,
        active3:0,
        title:'',
        practiceType: [
          {name:'全部',value:0},
          {name:'劳动教育',value:1},
          {name:'职业素养',value:2},
          {name:'应急安全',value:3},
          {name:'思政实践',value:4},
          {name:'创新创业',value:5}
        ],
        practiceStatus: [
          {name:'全部',value:0},
          {name:'未作答',value:1},
          {name:'已完成',value:2},
        ],
        itemList:[
          {
            id:1,
            title:'打扫卫生',
            time:'2024-10-20 15:26:09',
            type:'劳动教育',
            status:'审批中',
            score:'100',
            isSubmit:'审批中',
            grade:'0'
          },
          {
            id:2,
            title:'参加志愿者活动',
            time:'2024-10-20 15:26:09',
            type:'职业素养',
            status:'180积分',
            score:'300',
             isSubmit:'已完成',
             grade:'180'
          },
          {
            id:3,
            title:'打扫教室',
            time:'2024-10-20 15:26:09',
            type:'应急安全',
            status:'审批中',
            score:'100',
            isSubmit:'审批中',
            grade:'0'
          },
          {
            id:4,
            title:'打扫宿舍卫生',
            time:'2024-10-20 15:26:09',
            type:'思政实践',
            status:'已驳回',
            score:'200',
             isSubmit:'已驳回',
              grade:'0'
          },
          {
            id:5,
            title:'打扫宿舍卫生',
            time:'2024-10-20 15:26:09',
            type:'创新创业',
            status:'审批中',
            score:'200',
             isSubmit:'审批中',
              grade:'0'
          }
        ]
      };
    },
    onLoad(e) {
     
    },
    methods:{
      handelTab(index){
        this.active = this.practiceType[index].value
      },
      handelType(index){
        this.active2 = this.taskType[index].value
      },
      handelCompletion(index){
        this.active3 = this.practiceStatus[index].value
      },
      goPage(item){
        if( item.isSubmit == '已完成' || item.isSubmit == '审批中' ){
          this.$tools.goNext(`/pagesCopy/submitWork/weekWorkDetail?title=${item.type}&item=${JSON.stringify(item)}`)
        }
        },
    }
  }
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.mark{
  text-align: right;
  color: #f92929;
}
.title{
  color: #333;
  font-size: 28rpx;
  // font-weight: 500;
  // width: 300rpx;
  white-space: nowrap;
}
.title2{
  color: #333;
  font-size: 28rpx;
  width: 120rpx;
}
.btnWarp{
  width: 140px;
  height: 49px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .u-button.data-v-2bf0e569{
    height: 30px !important;
    margin-left: 10px;
  }
  
}
.content-warp{
  color: #333;
  font-size: 24rpx;
  .item-warp{
    padding: 24rpx;
    width: 100%;
    background: rgb(250, 242, 242);
    border-radius: 10px;
    margin-bottom: 30rpx;
    .requirement{
      width: 60%;
      // 溢出显示省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .btn{
      font-size: 26rpx;
      border: 1px solid #5ac725;
      padding: 5px 10px;
      border-radius: 20px;
      color: #5ac725;
      background: #fff;
    }
  }
  .txt-warp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .title{
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}
.points{
  text-align: right;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
</style>
